import "./App.scss";
import React from "react";
import {
  BrowserRouter as Router,
  Route,
  Routes,
  Link, 
} from "react-router-dom";
import Demo1_1 from "./pages/demo1.1";
import Demo1_2 from "./pages/demo1.2";
import Demo2 from "./pages/demo2";
import Demo3 from "./pages/demo3";
import Demo4 from "./pages/demo4";
import Demo5_1 from "./pages/demo5.1";
import Demo5_2 from "./pages/demo5.2";
import Demo6 from "./pages/demo6";
import Demo7 from "./pages/demo7";
import Demo8 from "./pages/demo8";
import Demo9_1 from "./pages/demo9.1";
import Demo9_2 from "./pages/demo9.2";
import Demo10 from "./pages/demo10";
import Demo11 from "./pages/demo11";
export default function () {
  return (
    <div className="app">
      <Router>
        <Routes>
          <Route path="/demo1_1" element={<Demo1_1 />} />
          <Route path="/demo1_2" element={<Demo1_2 />} />
          <Route path="/demo2" element={<Demo2 />} />
          <Route path="/demo3" element={<Demo3 />} />
          <Route path="/demo4" element={<Demo4 />} />
          <Route path="/demo5_1" element={<Demo5_1 />} />
          <Route path="/demo5_2" element={<Demo5_2 />} />
          <Route path="/demo6" element={<Demo6 />} />
          <Route path="/demo7" element={<Demo7 />} />
          <Route path="/demo8" element={<Demo8 />} />
          <Route path="/demo9_1" element={<Demo9_1 />} />
          <Route path="/demo9_2" element={<Demo9_2 />} />z  
          <Route path="/demo10" element={<Demo10 />} />
          <Route path="/demo11" element={<Demo11 />} />
        </Routes>

        <div className="links">
          <Link to="/demo1_1">(1.1)react组件(函数组件)</Link>
          <Link to="/demo1_2">(1.2)react组件(类组件)</Link>
          <Link to="/demo2">(2)react静态</Link>
          <Link to="/demo3">(3)react生命周期</Link>
          <Link to="/demo4">(4)jsx语法和注释</Link>
          <Link to="/demo5_1"> (5.1)事件绑定</Link>
          <Link to="/demo5_2"> (5.2)事件绑定</Link>
          <Link to="/demo6">(6)列表渲染</Link>
          <Link to="/demo7">(7)条件渲染</Link>
          <Link to="/demo8">(8)state和setState</Link>
          <Link to="/demo9_1">(9.1)表单输入</Link>
          <Link to="/demo9_2">(9.2)多个输入框</Link>
          <Link to="/demo10">(10)获取真实的 DOM 节点</Link>
          <Link to="/demo11">(11)父子组件通信</Link>
        </div>
      </Router>
    </div>
  );
}
